<template>
  <div class="login-box">
    <!-- 登录页头部 -->
    <LoginHeader></LoginHeader>
    <!-- 登录页主体背景 -->
    <div class="login-section">
      <!-- 登录框主体 -->
      <div class="go-home">
        <!-- 登录头部切换区域 -->
        <nav class="toggle-nav">
          <div @click="goAccount(1)" :class="{ active: toggleNav === 1 }">账户登录</div>
          <div @click="goAccount(0)" :class="{ active: toggleNav === 0 }">扫码登录</div>
        </nav>
        <!-- 输入框区域 -->
        <div class="form-box">
          <!-- 账户登录 -->
          <LoginForm v-if="toggleNav"></LoginForm>
          <!-- 扫码登录 -->
          <LoginCode v-else></LoginCode>
        </div>
      </div>
    </div>
    <!-- 登录页底部 -->
    <LoginFooter></LoginFooter>
  </div>
</template>

<script>
import LoginHeader from './component/login-header.vue'
import LoginFooter from './component/login-footer.vue'
import LoginForm from './component/login-form.vue'
import LoginCode from './component/login-code.vue'
import { ref } from 'vue'
export default {
  name: 'Login',
  components: { LoginHeader, LoginFooter, LoginForm, LoginCode },
  setup() {
    // 控制用户账户或者扫码登录
    const toggleNav = ref(1)
    const goAccount = num => {
      toggleNav.value = num
    }
    return { goAccount, toggleNav }
  }
}
</script>

<style lang="less" scoped>
.login-section {
  width: 100%;
  height: 488px;
  background: url(../../assets/images/images/login-bg.png) no-repeat center 50% / cover;
  position: relative;
  .form-box {
    padding: 0 30px;
  }
  .go-home {
    width: 380px;
    min-height: 400px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 54px;
    transform: translate3d(100px, 0, 0);
    box-shadow: 0 0 10px rgb(0 0 0 /15%);
    .toggle-nav {
      height: 55px;
      padding: 0 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      border-bottom: 1px solid #f5f5f5;
      cursor: pointer;
      .active {
        color: #27ba9b;
        font-weight: 700;
      }
    }
  }
}
</style>
